<template>
	<app-layout>
		<view class="contetn">
			<view class="a-image">
				<image class="image" :src="topimginfo.icon_url" mode="widthFix"></image>
			</view>
			<view class="top">
				<view class="dir-left-nowrap box">
					<input type="text" class="box-grow-1 input" confirm-type="搜索" @input="input" @confirm="search"
						v-model="keyword" placeholder="请输入昵称搜索">
					<view class="close-tip" @click="clear">
						<image class="search-close" v-if="keyword" src="/static/image/icon/delete-yuan.png"></image>
					</view>
					<view class="box-grow-0 cross-center" @click="search">搜索</view>
				</view>
			</view>
			<view class="release" :style="{bottom:BotHeight + 'rpx'}">
				<!-- <view class="release-one dir-left-nowrap cross-center">
					<view class="">
						自定义分享标题
					</view>
					<input type="text" class="box-grow-1 input" @input="cusinput" v-model="custitle"
						placeholder="请自定义分享标题" style="padding: 0 12rpx;" placeholder-style="color:#FFF;">
				</view> -->
				<!-- <button class="release-two" open-type="share">点击此按钮转发到群</button> -->
				<view class="release-two" @click="isshoe = true">
					点击此按钮转发到群
				</view>
			</view>
			<u-popup :customStyle="custyle" v-model="isshoe" mode="center" :maskCloseAble="false" border-radius="14"
				:safeAreaInsetBottom="true" @close="closez">
				<view class="gold-model" @touchmove.stop.prevent>
					<view class="closegold" @click="closez">
						关闭<image src="/static/image/close.png" mode=""></image>
					</view>
					<view class="release-one dir-left-nowrap cross-center">
						<view class="">
							自定义分享标题
						</view>
						<input type="text" class="box-grow-1 input" @input="cusinput" v-model="custitle"
							placeholder="请填写分享标题" style="padding: 0 12rpx;">
					</view>
					<view class="gold-use" :class="['u-checked ' + themeObject.back]">
						<button class="release-two" open-type="share">点击此按钮转发到群</button>
					</view>
				</view>
			</u-popup>
			<view class="follow" v-for="(item,index) in list" :key="index">
				<image class="avatar" :src="item.user.userInfo.avatar" mode=""></image>
				<view class="dir-top-wrap unamet">
					<view class="nickname u-line-3">
						{{item.user.nickname}}
					</view>
					<view class="createt">
						{{item.created_at}}
					</view>
				</view>

				<view class="dir-top-wrap cross-center">
					<view class="reviewed" @click.stop="examine(item)">
						发放金币
					</view>
					<view class="">
						已发放{{item.shownums}}金币
					</view>
				</view>
			</view>
			<view class="nopt" v-if="list.length == 0">
				暂无
			</view>
			<u-popup :customStyle="custyle" v-model="isshow" mode="center" :maskCloseAble="false" border-radius="14"
				:safeAreaInsetBottom="true" @close="close">
				<view class="gold-model" @touchmove.stop.prevent>
					<view class="closegold" @click="close">
						关闭<image src="/static/image/close.png" mode=""></image>
					</view>
					<!-- <view class="" style="text-align: center;margin-bottom: 20rpx;">
						发放金币
					</view> -->
					<view class="">
						1.邀请他人进群
						<view class="gold-use" @click="examines(citem,0)" :class="['u-checked ' + themeObject.back]">
							发放金币
						</view>
					</view>
					<view class="">
						2.被邀请进群
						<view class="gold-use" @click="examines(citem,1)" :class="['u-checked ' + themeObject.back]">
							发放金币
						</view>
					</view>
					<view class="">
						3.扫码进群
						<view class="gold-use" @click="examines(citem,2)" :class="['u-checked ' + themeObject.back]">
							发放金币
						</view>
					</view>
				</view>
			</u-popup>
		</view>
	</app-layout>
</template>

<script>
	import {
		mapState,
		mapGetters
	} from "vuex";
	import uPopup from '../../../components/basic-component/u-popup/u-popup.vue';
	export default {
		components: {
			uPopup
		},
		data() {
			return {
				page: 1,
				limit: 20,
				pagecount: 1,
				list: [],
				isexamine: false, // 是否审核
				isadopt: true, // 是否通过
				isrelease: false, // 是否发放

				mall_id: 1,
				sharejbnum: 0, // 邀请他人进群单个金币数
				sharejbnum1: 0, // 被邀请进群单个金币数
				sharejbnum2: 0, // 扫码进群单个金币数
				topimginfo: '',
				imglist: '',

				keyword: '',

				custyle: {
					'background': 'rgba(226, 226, 226, 0.3)',
				},
				isshow: false,
				citem: '',

				custitle: '',

				isshoe: false
			}
		},
		onLoad(options) {
			this.isshow = false
			// #ifdef MP-WEIXIN
			wx.showShareMenu({
				menus: ['shareAppMessage']
			})
			// #endif
			// this.mall_id = options.mall_id || 1
			// console.log(this.mall_id);
			this.onReq(253)
			this.onReq(255)
			this.goldnum()
			if (options.mall_id) {
				this.mall_id = options.mall_id
				this.loadList()
			} else {
				this.$request({
					url: this.$api.wechat_group.whether_binding
				}).then(res => {
					if (res.data.ismallbingding) {
						this.mall_id = res.data.ismallbingding.id
						this.loadList()
					}
				}).catch(err => {

				})
			}
		},
		onShareAppMessage() {
			/* let qparams = {
				path: '/pages/showindex/forward',
				params: {
					sharerid: this.userInfo.options.user_id,
					mall_id: this.mall_id,
					issharequn: 1
				}
			}
			if (this.imglist != '') {
				qparams = {
					path: '/pages/showindex/forward',
					imageUrl: this.imglist,
					params: {
						sharerid: this.userInfo.options.user_id,
						mall_id: this.mall_id,
						issharequn: 1
					}
				}
			} */
			this.isshoe = false
			return this.$shareAppMessage({
				title: this.custitle ? this.custitle : '双熙堂珠宝',
				path: '/pages/showindex/forward',
				imageUrl: this.imglist == '' ? '' : this.imglist,
				params: {
					sharerid: this.userInfo.options.user_id,
					mall_id: this.mall_id,
					issharequn: 1,
					isqunshare: 1
				}
			});
		},
		/* onShow() {
			this.isshoe = false
		}, */
		/* onShow() {
			this.list = []
			this.page = 1
			this.pagecount = 1
			this.loadList()
		}, */
		onReachBottom() {
			if (this.pagecount > this.page) {
				this.page++
				this.loadList()
			}
		},
		computed: {
			...mapState({
				userInfo: state => state.user.info
			}),
			themeObject: function() {
				return {
					back: this.getTheme + '-m-back ' + this.getTheme,
					theme: this.getTheme,
					color: this.getTheme + '-m-text ' + this.getTheme,
					sBack: this.getTheme + '-s-back ' + this.getTheme
				}
			},
			...mapGetters('mallConfig', {
				getTheme: 'getTheme',
			}),
			...mapGetters('iPhoneX', {
				BotHeight: 'getBotHeight',
				emptyHeight: 'getEmpty',
			}),
		},
		methods: {
			cusinput(e) {
				this.custitle = e.detail.value
			},
			input(e) {
				this.keyword = e.detail.value
			},
			clear() {
				this.keyword = ''
				this.page = 1
				this.pagecount = 1
				this.list = []
				this.loadList()
			},
			search() {
				this.keyword = this.keyword.trim();
				if (this.keyword == '') {
					uni.showToast({
						title: '请输入搜索内容',
						icon: 'none'
					})
					return
				}
				this.page = 1
				this.pagecount = 1
				this.list = []
				this.searchList()
			},
			searchList() {
				this.$request({
					url: this.$api.wechat_group.ranking_list,
					data: {
						keyword: this.keyword,
						page: this.page,
						// user_id: this.userInfo.options.user_id,
						puser_id: this.userInfo.options.user_id,
						mall_id: this.mall_id
					}
				}).then(res => {
					this.list = this.list.concat(res.data.list)
					this.pagecount = res.data.pagination.page_count
				}).catch(err => {})
			},
			// allReq() {
			// 	this.$request({
			// 		url: this.$api.navs.list,
			// 		data: {
			// 			pid: 255,
			// 			status: 1
			// 		}
			// 	}).then((res) => {
			// 		this.imglist = res.data.list
			// 	}).catch(() => {

			// 	})
			// }
			onReq(kid) {
				this.$request({
					url: this.$api.navs.catedetail,
					data: {
						keyword: kid,
						status: 1
					}
				}).then((res) => {
					if (kid == 253) {
						this.topimginfo = res.data.list[0]
					} else if (kid == 255 && res.data.list.length > 0) {
						this.imglist = res.data.list[0].icon_url
					}
				}).catch(() => {

				})
			},
			goldnum() {
				this.$request({
					url: this.$api.integral_mall.setting + '&type=["integral_ratio"]'
				}).then((res) => {
					this.sharejbnum = res.data.integral_ratio.sharejbnum
					this.sharejbnum1 = res.data.integral_ratio.sharejbnum1
					this.sharejbnum2 = res.data.integral_ratio.sharejbnum2
				}).catch(() => {})
			},
			examine(item) {
				this.isshow = true
				this.citem = item
				/* this.$utils.throttle(() => {
					uni.showModal({
						title: "发放金币",
						cancelText: "取消发放",
						confirmText: "确定发放",
						success: (res) => {
							if (res.confirm) {
								this.grant(item)
							}
						}
					})
				}, 3000); */
			},
			examines(item, type) {
				this.$utils.throttle(() => {
					uni.showModal({
						title: "发放金币",
						cancelText: "取消发放",
						confirmText: "确定发放",
						success: (res) => {
							if (res.confirm) {
								this.grant(item, type)
							}
						}
					})
				}, 3000);
			},
			close() {
				this.isshow = false
			},
			closez() {
				this.isshoe = false
			},
			grant(item, type) {
				this.$request({
					url: this.$api.wechat_group.send_gold_coins,
					data: {
						user_id: item.user_id,
						mall_id: item.mall_id,
						puser_id: item.puser_id,
						type: type
					}
				}).then(res => {
					// if (res.data == true) {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					this.close()
					// }
					if (res.data == true) {
						if (type == 0) {
							item.shownums = Number(item.shownums) + Number(this.sharejbnum)
						} else if (type == 1) {
							item.shownums = Number(item.shownums) + Number(this.sharejbnum1)
						} else if (type == 2) {
							item.shownums = Number(item.shownums) + Number(this.sharejbnum2)
						}
						// item.sort = Number(item.sort) + 1
					}
				}).catch(err => {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				})
			},
			ononon() {
				// #ifdef MP-WEIXIN
				// 
				// Rk_zaoCmy4SYCqGhzw8cnYcBSWvCBWVdx5v-uWCk4gw
				this.$subscribe(['Rk_zaoCmy4SYCqGhzw8cnYcBSWvCBWVdx5v-uWCk4gw']).then(res => {
					console.log(res, 'siccc');
				}).catch(e => {
					console.log(e, 'eee');
				})
				// #endif
			},
			loadList() {
				this.$request({
					url: this.$api.wechat_group.ranking_list,
					data: {
						page: this.page,
						// user_id: this.userInfo.options.user_id,
						puser_id: this.userInfo.options.user_id,
						mall_id: this.mall_id
					}
				}).then(res => {
					this.list = this.list.concat(res.data.list)
					this.pagecount = res.data.pagination.page_count
				}).catch(err => {})
			}
		}
	}
</script>

<style scoped lang="scss">
	.a-image {
		width: 100%;
		position: relative;
		color: #FFFFFF;
		font-size: 28rpx;

		.all-num {
			position: absolute;
			bottom: 10rpx;
			left: 5rpx;
		}

		.all-mx {
			position: absolute;
			bottom: 10rpx;
			right: 5rpx;
		}

		.image {
			width: 100%;
		}
	}

	.top {
		// position: fixed;
		width: 100%;
		// top: 0;
		z-index: 15;
		padding: #{20rpx} #{24rpx};
		// background-color: #efeff4;
		font-size: $uni-font-size-import-two;
		color: $uni-general-color-one;

		.input {
			background-color: #FFFFFF;
			border-radius: 16rpx 0 0 16rpx;
			color: #666666;
			// color: #c0c0c0;
			// box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.1);
			// background-color: #ffffff;
			// border-radius: #{50rpx 0 0 50rpx};
			padding: 0 #{32rpx};
			font-size: $uni-font-size-general-one;
			height: #{64rpx};
		}

		.box {
			position: relative;
			font-size: 28rpx;

			.close-tip {
				width: #{64rpx};
				height: #{64rpx};
				background-color: #ffffff;
				// border-radius: #{0 50rpx 50rpx 0};
				border-radius: 0 16rpx 16rpx 0;
				margin-right: #{20rpx};
			}

			.search-close {
				width: #{32rpx};
				height: #{32rpx};
				border-radius: 50%;
				margin: #{16rpx};
			}
		}

		.radio {
			margin-top: #{32rpx};

			.radio-item {
				padding-bottom: #{12rpx};
			}

			.active {
				border-bottom: #{4rpx} solid;
			}
		}
	}

	.release {
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		z-index: 100;
		width: 680rpx;
		background: #ff2600;
		color: #fff;
		border-radius: 10rpx;
		text-align: center;
		font-size: 32rpx;
		font-weight: 600;

		.release-one {
			font-size: 32rpx;
			font-weight: 300;
			height: 80rpx;
			// line-height: 80rpx;
			padding: 16rpx;
			border-bottom: 1rpx solid #FFFFFF;
			text-align: left;
		}

		.release-two {
			color: #fff;
			background: #ff2600;
			height: 80rpx;
			line-height: 80rpx;
		}
	}

	.befbutton {
		background: #342B2A;
		width: 100%;
		height: 168rpx;
		overflow: hidden;
	}

	.fbutton {
		border-radius: 0;
		width: 100%;
		height: 168rpx;
		line-height: 168rpx;
		font-weight: bold;
		font-size: 36rpx;
	}

	.bsbut {
		color: #FFFFFF;
		background: #CD9C62;
	}

	.bgbut {
		background: #342B2A;
		color: #FFFFFF;
	}

	.bcbut {
		border: 1rpx solid #342B2A;
		color: #342B2A;
	}

	.contetn {
		// background-color: #FFFFFF;
		width: 100%;
		height: 100%;
		// padding: 0 24rpx;
	}

	.follow {
		width: 100%;
		display: flex;
		align-items: center;
		height: 170rpx;
		font-size: 28rpx;
		font-weight: 700;
		justify-content: space-between;
		position: relative;
		padding: 0 12rpx;

		.avatar {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;

		}

		.unamet {
			flex: 1;
			padding: 0 20rpx;
		}

		.createt {
			color: #535353;
			font-size: 24rpx;
		}

		.nickname {}

		.f-gold {
			padding: 0 12rpx;
		}

		.reviewed {
			padding: 10rpx 20rpx;
			border: 1rpx solid #dcdcdc;
			border-radius: 12rpx;
		}

		.tips {
			position: absolute;
			top: 5rpx;
			right: 12rpx;
			font-size: 24rpx;
			color: #353535;
		}

		.approved {
			color: #279e1a;
		}

		.approvedf {
			color: #cf0000;
		}
	}

	.follow+.follow {
		border-top: 1rpx solid #dcdcdc;
	}

	.nopt {
		text-align: center;
		line-height: 360rpx;
		font-size: 24rpx;
	}

	.gold-model {
		// background: rgba(#eb0f13, .1);
		background: #fff;
		width: 670rpx;
		padding: 36rpx;
		font-size: 36rpx;
		line-height: 72rpx;

		// font-weight: bold;
		.input {
			flex: 1;
		}

		.closegold {
			display: flex;
			align-items: center;
			justify-content: flex-end;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-left: 30rpx;
			}
		}

		.gold-use {
			text-align: center;

			&.unchecked {
				background-color: #8f8f8f;
				color: #FFFFFF;
			}
		}

		.release-one {
			font-size: 32rpx;
			font-weight: 300;
			height: 80rpx;
			// line-height: 80rpx;
			// padding: 16rpx;
			border-bottom: 1rpx solid #FFFFFF;
			text-align: left;
		}

		.release-two {
			color: #fff;
			background: #ff2600;
			height: 80rpx;
			line-height: 80rpx;
		}
	}

	.u-checked {
		color: #ffffff;
	}
</style>
